<template>
  <transition name="el-zoom-in-center">
    <el-tooltip effect="dark" content="edit test tooltip" placement="top" enterable="false">
    <div class="tag clearfix" v-if="tagShow">
      <span class="text" ref="text"
            :class="{'text-edit': isEdit}" spellcheck="false" :contenteditable="contenteditable" @focus="textEdit"
            @blur="finishedEdit" @keyup.enter.prevent="finishedEdit">{{text}}</span>
      <i class="close el-icon-close" @click="closeTag"></i>
    </div>
    </el-tooltip>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        tagShow: true,
        contenteditable: true,
        text: 'edit menuLayout',
        isEdit: false
      }
    },
    methods: {
      textEdit() {
        this.isEdit = true
        // this.$refs.text.setSelectionRange(vLen, vLen)
      },
      finishedEdit() {
        this.isEdit = false
        this.$refs.text.blur()
        this.text = this.$refs.text.innerText
        console.log(this.text)
      },
      closeTag() {
        this.tagShow = false
      }
    },
    mounted() {
      document.onkeydown = function () {
        if (window.event && window.event.keyCode == 13) {
          window.event.returnValue = false;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  $closeWidth: 14px;
  .tag {
    display: inline-block;
    height: 28px;
    border-radius: 4px;
    padding: 0 5px;
    background: rgba(64,158,255,1);
    .text-edit {
      display: inline-block;
      min-width: 100px;
      color: #333;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #1e90ff;
    }
    .text {
      display: inline-block;
      font-weight: bold;
      outline: none;
      caret-color: #666;
      text-decoration: none;
    }
    .close {
      margin-left: 5px;
      display: inline-block;
      cursor: pointer;
      text-align: center;
      line-height: $closeWidth;
      margin-top: 8px;
      border-radius: 50%;
      cursor: pointer;
      width: $closeWidth;
      height: $closeWidth;
      &:hover {
        background: #f56c6c;
      }
    }
  }
</style>
